<template>
  <div class="global_bg">
    <VantNavigationBar title="修改密码"></VantNavigationBar>
    <div class="mt1">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="password.oldPassword"
            name="旧密码"
            label="旧密码"
            placeholder="请输入旧密码"
            :rules="[{ required: true, message: '请填写旧密码' }]"
          />
          <van-field
            v-model="password.newPassword"
            type="newpassword"
            name="新密码"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请填写新密码' }]"
          />
        </van-cell-group>
        <div class="logn_btn fts1 tc" @click="submitPwd">提交</div>
      </van-form>
    </div>
  </div>
</template>
<script>
import VantNavigationBar from '@/components/Navbar'
import {
  Form,
  Field,
  CellGroup,
  showSuccessToast,
  Toast,
  showToast,
} from 'vant'
import { ref } from 'vue'
import mine from '@/api/mine.js'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL'

export default {
  components: {
    VantNavigationBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [showSuccessToast.name]: showSuccessToast,
    [Toast.name]: Toast,
    [showToast.name]: showToast,
  },
  setup() {
    const password = ref({
      oldPassword: '',
      newPassword: '',
    })

    const router = useRouter()
    const submitPwd = () => {
      if (!password.value.oldPassword && !password.value.newPassword) {
        showToast('请输入完整信息！')
        return
      }

      mine.changePwdApi(password.value).then((res) => {
        if (res.status === 200) {
          showSuccessToast(res.msg)
          password.value.oldPassword = ''
          password.value.newPassword = ''
          router.push({ path: routerURL.MINE })
        }
      })
    }
    return {
      submitPwd,
      password,
    }
  },
}
</script>

<style></style>
